
<!-- 通知公告 -->
<template>
  <base-layout title="通知公告">
    <template #header>
      <router-link to="./search">
        <van-icon name="search" size="18" />
      </router-link>
    </template>
    <list ref="list" #default="{ data }">
      <div class="list-item" @click="$router.push(`/notice/detail/${data.strId}`)">
        <p>{{ data.strTitle }}</p>
        <span>{{ data.dtPubDate }}</span>
        <span>{{ data.strPubUnit }}</span>
      </div>
    </list>
  </base-layout>
</template>

<script>
import { zBNoticeMainApi} from 'api/server.js'
import scrollTop from '../../mixins/listScrollTop'
export default {
  name: 'notice',
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      if (vm.$store.state.include.length > 0) {
        //因为当钩子执行前，组件实例还没被创建
        // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
        vm.$store.commit('deleteInclude', 'noticeSearch')
      }
    })
  },
  data () {
    return {
    }
  },
  mixins: [scrollTop],
  mounted () {
    this.$refs.list.$getList(zBNoticeMainApi)
  }
}
</script>

<style lang='scss' scoped>
::v-deep .van-list {
  width: 100%;
  // height: 100%;
  overflow: auto;
  // margin-top: 10px;
  margin-bottom: 33px;
  background-color: #fff;
}
.list-item {
  min-height: 86px;
  font-size: 18px;
  line-height: 28px;
  margin: 16px 23px 0px 23px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f7f7f7;
  p {
    margin: 0px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  span {
    display: inline-block;
    line-height: 28px;
    color: #999;
    font-size: 13px;
    margin-right: 16px;
  }
}
</style>